<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Stater Template for Bootstrap</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/animate.css"/>
    <style type="text/css">
        body {
            padding-top: 50px;
        }
        .container {
            width: auto;
        }
        img { margin:0 auto;
        }

        .item:first-child > img{
            transform: rotate(180deg);
        }

        .item .img {
            width: 1100px !important;
            height: 500px !important;
        }

        .item:last-child .img{
            width: auto !important;
        }

        h2{
            padding-left: 20px;
        }

        .mask{
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background-color: rgba(0,0,0,0.5);
            opacity: 0;
            z-index: -1;
            transition: 1s;
        }

        .mask.show{
            z-index: 99;
            opacity: 1;
        }

        .img-box{
            position: relative;
            height: 100%;
        }

        .img-box > img{
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            width: 50%;
            margin: auto;
        }


        /*.carousel-inner{*/
            /*background-image: linear-gradient(to right,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%);*/
        /*}*/
    </style>
</head>

<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            </button>
            <a class="navbar-brand" href="#">我的工作</a>
        </div>
    </div>
</nav>


<div class="page-header">
    <h2 class="task-name"></h2>
</div>
<div id="carousel-example" class="carousel slide" data-ride="carousel">
    <!-- 先定义指示器-->
    <ol class="carousel-indicators">
        <li data-target="#carousel-example" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example" data-slide-to="1"></li>
        <li data-target="#carousel-example" data-slide-to="2"></li>
        <li data-target="#carousel-example" data-slide-to="3"></li>
        <li data-target="#carousel-example" data-slide-to="4"></li>
    </ol>
    <!--再定义实际的内容 -->
    <div class="carousel-inner" role="listbox">
        <div class="item active"><img class="img" ></div>
        <div class="item"><img class="img" ></div>
        <div class="item"><img class="img" ></div>
        <div class="item"><img class="img" ></div>
        <div class="item"><img class="img" ></div>
    </div>
    <!--最后定义翻页的标签 -->
    <a class="left carousel-control" href="#carousel-example" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#carousel-example" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

<div class="page-header">
</div>
<h2>说明</h2>
<div class="well text">
    <p class="partner"></p>
    <p class="detail"></p>
</div>


<div class="mask">
    <div class="img-box">
        <img src="images/regular/end.jpg" alt="今天的逼就装到这里了，谢谢大家"/>
    </div>
</div>

<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script >
    var levy = {
        task: [
            {
                name: '智慧社区订单打印功能',
                partner: '黎工',
                detail: '刚来第一天主流接收任务,第二天调通接口,打印机能出单;后面当咖啡厅员工发现打印机不能出单时,帮助他们学习安装与使用打印机的正确姿势',
            },
            {
                name: '智慧物业公众号debug',
                partner: '老吴',
                detail: '从老吴手中接手微信公众号的各种bug.大部分是前端的,小部分是后端的',
            },
            {
                name: '宏硕云端接口对接',
                partner: '老吴',
                detail: '给停车场用的接口,由我负责对接停车场给我们的接口,并与相关人员沟通，维护api文档',
            },
            {
                name: '智慧养老文章发布与显示v1/v2',
                partner: '两个前端实习生, 冯工',
                detail: '一开始带着实习生做，与冯工接口对接，后来几乎前后端的工作都包了,甚至发版本以及后期的维护工作.系统去演示了两次,均成功',
            },
            {
                name: 'LFOA H5',
                partner: '小明，虎子，启扬',
                detail: '正式作为前端，开始使用自动化工具构建前端项目(gulp+swig+sass),进行"混合式开发",即手机端只做header与footer，中间的内容由前端编写的html提供,到目前为止项目有一半的页面是我写的，最近在搞审批工作流那一块',
            }
        ],
        index: 0, //数组下标,
        maxIndex: 4,
        imgPrefix: 'images/regular/',
        imgSuffix: '.jpg',
    };

    var log = function(msg){
        console.log(msg);
    };

    function showText(index){
        var task = levy.task[index];
        $('.task-name').text(task.name);
        $('.text').find('.partner').text("合作人: " + task.partner).next().text(task.detail);
    }

    function end(){
        var $nav = $('nav');

        $nav.hide()

        $('.mask').addClass('show')
                .find('img').addClass('animated bounceInDown')
            .end().click(function () {
                    $nav.show();
                    $(this).removeClass('show')
                        .find('img').removeClass('animated bounceInDown');
                });
    }



    $(function () {
        var index = levy.index,
            maxIndex = levy.maxIndex;

        //img
        $('.img').each(function(i){
            $(this).attr('src', levy.imgPrefix + i + levy.imgSuffix)
        });


        //carousel
        $('#carousel-example').carousel({
            interval:0,
            wrap:false,
        })

        showText(index);

        $('.carousel-control').on('click dblclick', function (e) {
            log(e)

            if($(this).hasClass('left')){
                index == 0 ? index = 0 : index --;
            }
            else{
                index == maxIndex ? e.type == 'dblclick' ? end() : index = maxIndex : index++;
            }
            showText(index);
        });
    });
</script>
</body>
</html>
